{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import {Highlights, Hero} from '@react-spectrum/docs';
import heroNarrow from 'url:../assets/ReactStately_Mobile_976x1025_1x.png';
import heroNarrow2x from 'url:../assets/ReactStately_Mobile_976x1025_2x.png';
import heroNarrowWebp from 'url:../assets/ReactStately_Mobile_976x1025_1x.webp';
import heroNarrow2xWebp from 'url:../assets/ReactStately_Mobile_976x1025_2x.webp';
import heroWide from 'url:../assets/ReactStately_976x445_1x.png';
import heroWide2x from 'url:../assets/ReactStately_976x445_2x.png';
import heroWideWebp from 'url:../assets/ReactStately_976x445_1x.webp';
import heroWide2xWebp from 'url:../assets/ReactStately_976x445_2x.webp';
import clsx from 'clsx';
import linkStyle from '@adobe/spectrum-css-temp/components/link/vars.css';
import styles from '@react-spectrum/docs/src/docs.css';
import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';

---
category: Libraries
description: A library of React Hooks that provides cross-platform state management for your design system.
---

# React Stately

A library of React Hooks that provides cross-platform state management for your design system.

<p className={clsx(typographyStyles['spectrum-Body2'], styles.homeLinks)}>
  <a href="getting-started.html" className={clsx(linkStyle['spectrum-Link'], styles.link)}>Get started</a>
  <span aria-hidden="true">•</span>
  <a href="https://github.com/adobe/react-spectrum" className={clsx(linkStyle['spectrum-Link'], styles.link)}>GitHub</a>
</p>

<Hero
  narrow={heroNarrow}
  narrow2x={heroNarrow2x}
  narrowWebp={heroNarrowWebp}
  narrow2xWebp={heroNarrow2xWebp}
  wide={heroWide}
  wide2x={heroWide2x}
  wideWebp={heroWideWebp}
  wide2xWebp={heroWide2xWebp}
  alt="React Stately hero image" />

<Highlights items={[
  {
    title: 'Foundational',
    description: 'React Stately provides the foundation and core logic for your component library. It handles state management for common components through an easy-to-use interface.',
  },
  {
    title: 'Powered by React Hooks',
    description: 'React Stately is implemented as a library of React Hooks, which allows you to adapt them to your needs through composition.',
  },
  {
    title: 'Cross-platform',
    description: 'React Stately only provides state management, with no assumptions about the DOM or other view systems.'
  },
  {
    title: 'Design agnostic',
    description: 'React Stately doesn’t make any assumptions about your design. It provides state management that’s intrinsic to the functionality of the component.'
  }
]} />
